import {useReducer, useState} from 'react'



function List(){
  const [List,setList] = useState([
    {
      id:0,
      isadd: true,
      title:'name'
    },
    {
      id:1,
      isadd: false,
      title:'age'
    },
    {
      id:2,
      isadd: false,
      title:'hight'
    },
    {
      id:3,
      isadd: false,
      title:'width'
    }
  ]);
  const handleCheck= function(id){
    List[id].isadd= !List[id].isadd
    setList([...List])
    console.log(id);
  };

  return (
    <div>
      <ul>
        {List.map((item,index)=>{
          return (
          <li key={item.id}>
            <label htmlFor={item.title}>
              <input type="checkbox" id={item.title} onChange={()=>handleCheck(item.id)} checked={item.isadd}/>
              <span>this is {item.title}</span>
            </label>
          </li>
          )
        })}
        {List.map((item,index)=>{
          return (
          <div>
          {/* <hr/> */}
            {item.isadd ? <li key={item.id} >
                {<span>this is {item.title}</span>}
            </li> : ''}
          </div>
          )
        })}
        <span>11</span>
      </ul>
    </div>
  )

}

export default List